<template>
  <view>
    <image class="bg" src="../../../static/my/fxtg.png" mode="aspectFill" />
    <view class="back" @click="goBack">
      <u-icon name="arrow-left" size="24" color="#fff"></u-icon>
    </view>
    <view class="topBg">
      <view class="left">
        <view class="title">分享推广</view>
        <view class="desc">分享邀请可获得积分奖励</view>
      </view>
    </view>
    <view class="pageBox">
      <view class="mainBox">
        <image class="img" src="/static/my/fxtg.png" mode="" />
        <view class="desc">分享二维码要请进入</view>
        <view class="yqm">489FF23</view>

        <u-button text="复制邀请码" color="#81D8D0" customStyle="width:400rpx"></u-button>
      </view>
      <view class="ruleBox">
        <view class="title"> 推广规则 </view>
        会员管理细则一、本管理细则的制定，是为加强会员制的管理，明确相关部门的责任和工作流程，使会员制能够有条不紊的开展，达到为公司创造良好经济效益的目的。二、各门店服务台人员</view
      >
    </view>
    <view class="bottomBox">
      <u-button text="立即邀请" color="#81D8D0"></u-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { goBack } from "@/utils/commonFn";

// import { inviteQrCode } from "@/api/my";
// import { copyFn, saveImage } from "@/utils/commonFn";
// import { onMounted, ref } from "vue";

// const imgUrl = ref("");
// const invitationCode = uni.getStorageSync("userInfo").invitationCode;
// onMounted(async () => {
//   const res = await inviteQrCode();
//   // 添加前缀变成可以在img标签中使用的src
//   console.log(res.data);

//   imgUrl.value = res.data;
// });
</script>

<style lang="less" scoped>
/deep/ .u-navbar__content__title {
  color: #fff;
}
.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 468rpx;
  z-index: 1;
}
.back {
  z-index: 99999;
}
.topBg {
  box-sizing: border-box;
  width: 100%;
  height: 468rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 48rpx 64rpx;
  position: relative;
  z-index: 99;
  .left {
    color: #fff;
    .title {
      font-weight: 700;
      font-size: 72rpx;
      line-height: 140rpx;
    }
    .desc {
      font-weight: 400;
      font-size: 28rpx;
      line-height: 34rpx;
    }
  }
}
.pageBox {
  position: absolute;
  top: 450rpx;
  z-index: 8;
  .mainBox {
    width: 686rpx;
    height: 914rpx;
    background: #fff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    border: 2rpx solid #fff;
    margin: 0px 32rpx;
    text-align: center;
    .img {
      width: 400rpx;
      height: 400rpx;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      text-align: center;
      margin: 180rpx auto 0px;
    }
    .desc {
      font-weight: 400;
      font-size: 24rpx;
      text-align: center;
      color: #8a8a8d;
      line-height: 38rpx;
    }
    .yqm {
      font-family: PingFang SC, PingFang SC;
      line-height: 108rpx;
      font-weight: 500;
      font-size: 48rpx;
      color: #333333;
    }
  }
  .ruleBox {
    font-weight: 300;
    font-size: 24rpx;
    color: #8a8a8d;
    line-height: 42rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    background: #fff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin: 20rpx 32rpx 150rpx;
    padding: 44rpx 32rpx;
    .title {
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
      line-height: 40rpx;
      text-align: center;
    }
  }
}
</style>
